<!--
 * @Description: 导入源订单页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-18 18:42:54
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-22 20:27:19
 -->
<template>
  <div class="div-inline">
    <el-button type="danger" size="mini" @click="to">导入源订单</el-button>
    <el-dialog :visible.sync="dialog" title="导入源订单信息" width="550px" style="text-align:left;">
      <el-form :model="form" label-position="left" label-width="90px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="订单来源：">
              <treeselect v-model="form.channel_code" :options="secondChannels" :flatten-search-results="true" :disable-branch-nodes="true" style="width:180%" placeholder="请选择渠道" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="选择文件：">
            <div class="input-group">
              <div class="input-group-box">
                <div class="el-upload el-upload--text">
                  <div class="el-upload-dragger">
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  </div>
                  <input id="files" type="file" name="file_name" @change="getFileInfo($event)">
                </div>
              </div>
            </div>
            <div class="input-group">
              <label />
              <div class="input-group-box">
                <div v-if="form.file" v-html="form.file.name" /> 
              </div>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="commitImport">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import eForm from './form'

export default {
  components: { eForm, Treeselect },
  props: {
    supThis: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      secondChannels: [],
      form: {
        channel_code: null,
        file: ''
      },
    }
  },
  mounted() {
    this._getCascadeSecond()
  },
  methods: {
    to() {
      this.dialog = true
    },
    _getCascadeSecond() {
      //查询渠道信息
      this.$api.enterprise.channel
        .cascadeSecond({
          params: { status: 1 }
        })
        .then(res => {
          this.secondChannels = res.data.channels
        }).catch(err => {
          console.log(err)
        })
    },
    commitImport() {
      const param = new FormData() //创建form对象
      for (const key in this.form) {
        param.append(key, this.form[key]) //通过append向form对象添加数据
      }

      this.loading = true
      this.$api.order.origin
        .import({
          data: param,
          headers: { 'Content-Type': 'multipart/form-data' }
        })
        .then(res => {
          this.loading = false
          this.form = {
            channel_code: null,
            file: ''
          }
          this.$parent.init()
        }).catch(err => {
          this.loading = false
        })
    },
    getFileInfo(event) {
      this.form.file = event.target.files[0]
      var filename = event.target.files[0].name
      var fileArry = filename.split('.')
      var fileLen = fileArry.length
      var suffix = fileArry[fileLen - 1]
      if (suffix === 'csv' || suffix === 'xls' || suffix === 'xlsx' || suffix === 'xlsm') {
        return false
      } else {
        this.$notify({ title: '错误', message: '上传的文档不合格', type: 'error', duration: 1500 })
      }
    }
  }
}
</script>

<style scoped>
#files {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  display: block !important;
}
</style>
